<template>
  <a-modal
    v-model:visible="visible"
    :title="modalTitle"
    width="35%"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form :model="formState" ref="formRef">
      <a-form-item
        label="虚拟用户个数"
        name="v_user_number"
        :rules="[{ required: true, message: '请输入虚拟用户个数' }]"
      >
        <a-input-number
          v-model:value="formState.v_user_number"
          placeholder="请输入虚拟用户个数"
          style="width: 200px"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import useModal from "@/utils/useModal";
import { reactive, ref } from "vue";
import { addVUser } from "@/api/subscribe";
import { message } from "ant-design-vue";

const { visible, modalTitle } = useModal();
const formRef = ref();
const emits = defineEmits(["model-success"]);

const formState = reactive({
  v_user_number: null, //虚拟用户个数
});

const show = (model) => {
  visible.value = true;
  modalTitle.value = "添加虚拟用户";
  formState.id = model.subscribe_id; //申购id
};
const handleOk = async () => {
  await formRef.value.validate().then(() => {
    addVUser({
      id: formState.id, //申购id
      ...formState,
    }).then((res) => {
      if (res.code == 0) {
        message.success(res.msg);
        formRef.value.resetFields();
        visible.value = false;
        emits("model-success");
      }
    });
  });
};
const handleCancel = () => {
  formRef.value.resetFields();
};
defineExpose({
  show,
});
</script>